<template>
	<tn-popup v-model="show" mode="bottom" @close="closeShow">
	  <view class="content total">共 {{ commentNum }} 条评论</view>
	  <scroll-view scroll-y="true" style="height: 50vh;">
		  <view class="sidebar-container">
			  <view class="sidebar_box" v-for="(item, index) in commentList" :key="item.id">
				  <tn-avatar :src="item.avatar" style="vertical-align: top;"></tn-avatar>
				  <span class="publisher_name">{{ item.name }}</span>
				  <span class="author" v-if="item.isAuthor">作者</span>
				  <view class="like">
					<view>
						<image :src="likeIcon" style="width: 16px;height: 16px;"></image>
					</view>
					<view>
						  {{ item.likeNum }}
					</view>
				  </view>
				  <view class="publisher_content">
					  <span>{{ item.content }}</span>
					  <span class="publisher_time">{{ item.time }} 回复</span>
				  </view>
				  <view class="sidebar_child_box" v-show="item.childerList.length<3 || item.isMore" v-for="(childerItem, childerIndex) in item.childerList" :key="childerItem.id">
					<tn-avatar :src="childerItem.avatar" style="vertical-align: top;"></tn-avatar>
					<span class="publisher_name">{{ childerItem.name }}</span>
					<span class="author" v-if="childerItem.isAuthor">作者</span>
					<view class="publisher_content">
						<span>{{ childerItem.content }}</span>
						<span class="publisher_time">{{ childerItem.time }} 回复</span>
					</view>
				  </view>
				  <view class="sidebar_child_box" v-for="(childerItem, childerIndex) in item.childerList" :key="childerItem.id" v-show="item.childerList.length>3 && childerIndex === 1 && !item.isMore">
					<tn-avatar :src="childerItem.avatar" style="vertical-align: top;"></tn-avatar>
					<span class="publisher_name">{{ childerItem.name }}</span>
					<span class="author" v-if="childerItem.isAuthor">作者</span>
					<view class="publisher_content">
						<span>{{ childerItem.content }}</span>
						<span class="publisher_time">{{ childerItem.time }} 回复</span>
					</view>
				  </view>
				  <view class="sidebar_open" v-show="!item.isMore && item.childerList.length>3" @click="changeMore(item)">展开{{ item.childerList.length-1 }}条回复</view>
			  </view>
		  </view>
	  </scroll-view>
	</tn-popup>
</template>

<script>
export default {
	props: {
		isShow: Boolean,
	},
	watch: {
		isShow(newValue, oldValue) {
			this.show = newValue
		}
	},
	data() {
		return {
			show: false,
			commentNum: 12,
			likeIcon: require('@/pages/users/static/xingzu/like2.png'),
			isLikeIcon: require('@/pages/users/static/xingzu/isLike.png'),
			isAuthor: false,
			newList: [],
			commentList: [
				{
					id: 0,
					name: '郭芳',
					avatar: 'https://via.placeholder.com/200x500.png/ff0000',
					content: '环境看上去的确很赞，照片拍的也不错， 小姐姐的分享很赞哦~',
					time: '2024-06-22',
					isAuthor: false,
					isMore: false,
					likeNum: 5,
					childerList: [],
				},
				{
					id: 1,
					name: '郭芳',
					avatar: 'https://via.placeholder.com/200x500.png/ff0000',
					content: '环境看上去的确很赞，照片拍的也不错， 小姐姐的分享很赞哦~',
					time: '2024-06-22',
					isAuthor: false,
					isMore: false,
					likeNum: 5,
					childerList: [
						{ 
							id: 2,
							name: '郭芳',
							avatar: 'https://via.placeholder.com/200x500.png/ff0000',
							content: '谢谢～嘻嘻',
							isAuthor: true,
							time: '2024-06-22',
						},
						{
							id: 3,
							name: '郭芳',
							avatar: 'https://via.placeholder.com/200x500.png/ff0000',
							content: '谢谢～嘻嘻',
							isAuthor: true,
							time: '2024-06-22',
						},
						{
							id: 4,
							name: '郭芳',
							avatar: 'https://via.placeholder.com/200x500.png/ff0000',
							content: '谢谢～嘻嘻',
							isAuthor: true,
							time: '2024-06-22',
						},
						{
							id: 5,
							name: '郭芳',
							avatar: 'https://via.placeholder.com/200x500.png/ff0000',
							content: '谢谢～嘻嘻',
							isAuthor: true,
							time: '2024-06-22',
						},
					],
				},
				{
					id: 6,
					name: '郭芳',
					avatar: 'https://via.placeholder.com/200x500.png/ff0000',
					content: '环境看上去的确很赞，照片拍的也不错， 小姐姐的分享很赞哦~',
					time: '2024-06-22',
					isAuthor: false,
					isMore: false,
					likeNum: 5,
					childerList: [
						{ 
							id: 7,
							name: '郭芳',
							avatar: 'https://via.placeholder.com/200x500.png/ff0000',
							content: '谢谢～嘻嘻',
							isAuthor: true,
							time: '2024-06-22',
						},
						{
							id: 8,
							name: '郭芳',
							avatar: 'https://via.placeholder.com/200x500.png/ff0000',
							content: '谢谢～嘻嘻',
							isAuthor: true,
							time: '2024-06-22',
						},
					],
				}
			]
		}
	},
	methods: {
		closeShow() {
			this.$emit('close')
		},
		changeMore(data) {
			data.isMore = true
		}
	}
}
</script>

<style scoped>
.content {
	padding: 20px;
}
.total {
	color: #808080;
	font-size: 12px;
}
.sidebar_box {
	width: 100%;
	padding: 0 20px 16px 20px;
}
.sidebar_box:not(:first-child) {
	padding: 16px 20px;
}
.sidebar_box:not(:last-child) {
	border-bottom: 1px solid #EBEBEB;
}
.sidebar_child_box {
	padding: 14px 50px;
}
.sidebar_open {
	padding: 0 50px 0 90px;
	color: #FE0000;
	font-size: 14px;
}
.publisher_name {
	margin-left: 10px;
	color: #808080;
	font-size: 14px;
}
.publisher_content {
	width: calc(100% - 75px);
	margin-left: 43px;
	margin-top: -10px;
	color: #1A1A1A;
	font-size: 12px;
}
.publisher_time {
	color: #999999;
	padding-left: 10px;
	line-height: 12px;
}
.like {
	float: right;
	text-align: center;
}
.author {
	background-color: #F6F6F6;
	padding: 2px 8px;
	margin-left: 5px;
	color: #666666;
	border-radius: 9px;
	font-size: 10px;
}
</style>